<template>
  <!-- 添加或修改验收任务对话框 -->
  <el-dialog append-to-body :title="dialogTitle" :visible.sync="open" width="600px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dialog-form">
      <el-row>
        <el-col :span="colSpan">
          <el-form-item label="任务名称" prop="taskName">
            <el-input :readonly="editable" v-model="form.taskName" placeholder="请输入验收任务名称" />
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" v-show="checkRole(['admin'])">
          <el-form-item label="企业" prop="distDeptId">
            <treeselect
              v-model="form.distDeptId"
              :options="deptOptions"
              :disabled="deptDisabled"
              placeholder="选择企业"
            />
          </el-form-item>
        </el-col>
        <el-col :span="colSpan" v-show="checkRole(['admin'])">
          <el-form-item label="标注工厂" prop="factoryIds">
            <treeselect
              class="multi-tree-select"
              v-model="form.factoryIds"
              :multiple="true"
              :limit="3"
              :options="factoriesOptions"
              :disabled="workStarted"
              placeholder="选择企业"
            />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="colSpan">
          <el-form-item label="验收任务状态">
            <el-select :disabled="editable" v-model="form.taskStatus" placeholder="请选择任务状态">
              <el-option
                v-for="dict in taskStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="colSpan">
          <el-form-item label="标注类型" prop="markType">
            <el-select v-model="form.markType" :disabled="workStarted" placeholder="请选择标注类型">
              <el-option
                v-for="dict in markTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="colSpan">
          <el-form-item label="标注属性字典" prop="markAttributes">
            <el-input
              v-model="form.markAttributes"
              :disabled="workStarted"
              placeholder="请输入已配置的标注属性字典名称"
            />
          </el-form-item>
        </el-col>

        <el-col :span="colSpan">
          <el-form-item label="任务流程" prop="processId">
            <el-select v-model="form.processId" :disabled="workStarted" placeholder="请选择任务流程">
              <el-option v-for="dict in processOptions" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="colSpan">
          <el-form-item label="作业方式" prop="autoPick">
            <el-radio-group v-model="form.autoPick" :disabled="workDone">
              <el-radio :label="0">人工指派</el-radio>
              <el-radio :label="1">自动领取</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="colSpan">
          <el-form-item label="任务等待时间" prop="waitTime">
            <el-input-number
              v-model="form.waitTime"
              placeholder="设置任务的最大等待时间/分钟"
              :min="0"
              :step="30"
              :disabled="workDone"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="colSpan">
          <el-form-item label="超时自动撤回" prop="autoCancel">
            <el-switch
              v-model="form.autoCancel"
              :active-value="1"
              :inactive-value="0"
              active-text="是"
              inactive-text="否"
              :disabled="workDone"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { checkRole } from '@/utils/permission'
import {
  listQaTask,
  listQaTaskChecker,
  listQaTaskQa,
  getQaTask,
  getTaskWithParent,
  updateQaTaskStatus,
  delQaTask,
  addQaTask,
  updateQaTask,
  summarize,
  batchSummarize,
  taskAutoCheck,
} from '@/api/mark/qaTaskV1'
import { listProcess } from '@/api/template/process'

import Treeselect from '@riophae/vue-treeselect'

const validateTaskName = (rule, value, callback) => {
  const reg = /^[^\\/:\*\?""<>|$\'￥%# ]{1,120}$/
  let ret = reg.test(value)
  if (ret) {
    callback()
  } else {
    callback(new Error('任务名称不能包含特殊字符。'))
  }
}

const title = '验收任务'
export default {
  name: 'TaskFormDialog',
  components: { Treeselect },

  props: {
    // taskStatusOptions: { type: Array },
    deptOptions: { type: Array },
    factoriesOptions: { type: Array },
    markTypeOptions: { type: Array },
  },

  data() {
    return {
      form: {},

      // 表单校验
      rules: {
        taskName: [
          { required: true, message: '验收任务名称不能为空', trigger: 'blur' },
          { max: 100, message: '最大长度为100个字符', trigger: 'blur' },
          { validator: validateTaskName, trigger: 'blur' },
        ],
        factoryIds: [{ required: true, message: '标注工厂不能为空', trigger: 'blur' }],
        distDeptId: [{ required: true, message: '所属企业不能为空', trigger: 'blur' }],
        markType: [{ required: true, message: '标注类型不能为空', trigger: 'blur' }],
        markAttributes: [{ required: true, message: '属性字典不能为空', trigger: 'blur' }],
        processId: [{ required: true, message: '流程模板不能为空', trigger: 'blur' }],
      },

      open: false,
      colSpan: 24,

      processOptions: [],
    }
  },
  computed: {
    dialogTitle() {
      return (this.form.taskId ? '修改' : '添加') + title
    },
    editable() {
      return !!this.form.taskId
    },

    // 如果有父任务, deptId 无法修改, factoryId只能是父任务的其中之前
    deptDisabled() {
      return this.form.parentId && this.form.parentId != '0'
    },
    // 标注类型 只能在未分包之前修改,
    // 标注工厂: 子任务只能是单选
    multiFactory() {
      // return !this.form.isLeaf
      return true
    },

    // 任务流程模板: 第一次标注之前可以更改
    workStarted() {
      return this.form.status && this.form.status >= 30
    },
    workDone() {
      return this.form.status && this.form.status >= 90
    },
  },

  created() {
    // this.initOptions()
  },

  methods: {
    checkRole,
    add() {
      this.form = { autoCancel: 1, autoPick: 1 }
      this.form.taskStatus = '0'
      this.openDialog()
    },

    edit(data) {
      this.form = { ...data }
      this.openDialog()
    },

    handleOk() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form)
        }
      })
    },

    close() {
      this.open = false
    },

    handleCancel() {
      this.open = false
    },

    reset() {
      this.resetForm('form')
    },

    openDialog() {
      this.open = true
      this.initOptions()
    },

    initOptions() {
      listProcess({ status: 1 }).then((response) => {
        this.processOptions = response.rows
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-form {
  padding: 0 20px;
  .el-select {
    width: 100%;
  }
  .el-input-number {
    width: 100%;
  }

  .multi-tree-select {
    line-height: 24px;
  }
}
</style>
